<template>
    <div>
        <label class="radio">
            <input
                class="radio-input"
                type="radio"
                :name="radioName"
                :checked="checked"
                @change="radioClick"
            />
            <span></span>
        </label>
    </div>
</template>

<script>
export default {
    name: 'CommonRadio',
    props: ['radioName','checked'],
    methods: {
        radioClick() {
            this.$emit('radioClick')
        }
    }
}
</script>

<style lang="stylus" scoped>
.radio
    position relative
    display block
    width 0.42rem
    height 0.42rem
    .radio-input
        position absolute
        top 0
        left 0
        width 0.42rem
        height 0.42rem
        appearance none
        -webkit-appearance none
        outline none
        opacity 0
    .radio-input+span
        display inline-block
        width 0.42rem
        height 0.42rem
        background-image url('../assets/images/cart/off.png')
        background-repeat no-repeat
        background-size 100% 100%
    .radio-input:checked+span
        background-image url('../assets/images/cart/on.png')
</style>


